<template>
	<a-popconfirm
		v-if="type === 'popconfirm'"
		title="删除此信息？"
		:visible="deleteVisible"
		@visibleChange="deleteVisibleChange"
		@confirm="deleteBatch"
	>
		<a-button danger>
			<template #icon><delete-outlined /></template>
			{{ props.buttonName }}
		</a-button>
	</a-popconfirm>
	<a-button v-else-if="type === 'modal'" danger @click="handleDeleteBatch">
		<template #icon><delete-outlined /></template>
		{{ props.buttonName }}
	</a-button>
</template>

<script setup name="commonBatchDelete">
	import { message, Modal } from 'ant-design-vue'
	import { createVNode } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import customerLevelApi from '@/api/biz/crm/customerLevelApi'
	const deleteVisible = ref(false)
	const emit = defineEmits({ batchDelete: null })
	const props = defineProps({
		buttonName: {
			type: String,
			default: () => '批量删除'
		},
		selectedRowKeys: {
			type: Array,
			default: () => []
		},
		type: {
			type: String,
			default: 'popconfirm'
		}
	})
	// 参数校验
	const deleteVisibleChange = () => {
		if (deleteVisible.value) {
			deleteVisible.value = false
			return false
		}
		if (props.selectedRowKeys.length < 1) {
			message.warning('请选择一条或多条数据')
			deleteVisible.value = false
			return false
		} else {
			deleteVisible.value = true
		}
	}
	// 批量删除
	const deleteBatch = () => {
		const params = props.selectedRowKeys.map((m) => {
			return {
				id: m
			}
		})
		// 发起方法调用，谁的谁来实现
		emit('batchDelete', params)
	}
	const handleDeleteBatch = () => {
		if (props.selectedRowKeys.length < 1) {
			message.warning('请选择一条或多条数据')
			deleteVisible.value = false
			return false
		}
		Modal.confirm({
			title: '提示',
			icon: createVNode(ExclamationCircleOutlined),
			content: '确定要删除吗？',
			okText: '确认',
			cancelText: '取消',
			onOk: () => {
				deleteBatch()
			}
		})
	}
</script>
